{% import 'IcsocIvrBundle:Ivr:node_fields.html.twig' as ivr %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

<form class="form-horizontal" action="" method="post" name="form">
    {{ ivr.node_name()  }}
    <div class="form-group">
        <label for="form_transfer_type" class="col-sm-3 control-label no-padding-right">{{ "Transfer type"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_transfer_type" name="form[transfer_type]" class="col-sm-6">
                {% for key, transfer_type in transfer_type %}
                    <option value="{{ key }}">
                        {{ transfer_type|trans }}
                    </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "transfer type help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div id="form_agent_div" class="form-group">
        <label for="form_agent" class="col-sm-3 control-label no-padding-right">{{ "Transfer Agent"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_agent" name="form[agent]" required="required" class="chosen-select">
                <option value="" selected="selected">{{ "Please Select Agents"|trans }}</option>
                {% for key, agent in agent %}
                    <option value="{{ key }}">
                        {{ agent|trans }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div id="form_variable_name_div" class="form-group">
        <label for="form_variable_name" class="col-sm-3 control-label no-padding-right">{{ "Variable names"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_variable_name" class="col-sm-6">
                <option value="">{{ 'Please Selected Variable'|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "variable name help"|trans }},{{ 'system variable name help'|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {#<div class="form-group">
        <label for="form_if_enable_when_agent_is_not_login_transfer_to_mobile" class="col-sm-3 control-label no-padding-right">{{ "If enable when agent is not login transfer to mobile"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_if_enable_when_agent_is_not_login_transfer_to_mobile" name="form[if_enable_when_agent_is_not_login_transfer_to_mobile]" class="col-sm-6">
                <option value="0" selected="selected">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "if_enable_when_agent_is_not_login_transfer_to_mobile help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>#}
    <div id="form_transfer_mode_div" class="form-group">
        <label for="form_transfer_mode" class="col-sm-3 control-label no-padding-right">{{ "Transfer mode"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_transfer_mode" name="form[transfer_mode]" class="col-sm-6">
                {% for key, transfer_mode in transfer_mode %}
                <option value="{{ key }}">
                    {{ transfer_mode|trans }}
                </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "transfer_mode help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {{ ivr.jump_nodes(nodes,'Transfer Agent Fail Jump Node') }}
    {{ ivr.ivr_count() }}
    <div class="clearfix well well-sm">
        <div class="col-md-offset-4 col-md-8">
            {{ button('Save', 'btn-node-attr') }}
        </div>
    </div>
</form>
<script type="application/javascript">
    $(document).ready(function(){
        setVariableOption($("#form_variable_name"));
        $('#form_transfer_type').on('change', function() {
            form_transfer_type();
        });
       /* $('#form_if_enable_when_agent_is_not_login_transfer_to_mobile').on('change', function() {
            transfer_mode_div();
        });*/
    });

    function form_transfer_type(){
        var value = $('#form_transfer_type').val();
        var $form_agent_div = $("#form_agent_div");
        var $form_variable_name_div = $("#form_variable_name_div");
        switch(value){
            case 'fixed':
                $form_agent_div.removeClass('hidden');
                $form_variable_name_div.addClass('hidden');
                break;
            case 'variable':
                $form_agent_div.addClass('hidden');
                $form_variable_name_div.removeClass('hidden');
                break;
            case 'memory':
                $form_agent_div.addClass('hidden');
                $form_variable_name_div.addClass('hidden');
                break;
        }
    }

    function transfer_mode_div()
    {
        var value = $('#form_if_enable_when_agent_is_not_login_transfer_to_mobile').val();
        var $form_transfer_mode_div = $("#form_transfer_mode_div");
        if (value == 1) {
            $form_transfer_mode_div.removeClass('hidden');
        } else {
            $form_transfer_mode_div.addClass('hidden');
        }
    }
</script>
